<template>
  <div class="acount">
    <div class="wrap">
      <a-form id="login" layout="vertical" @submit="submitList">
        <h1 class="title">Login</h1>
        <a-form-item label="用户名">
          <a-input v-model:value="mes.username" placeholder="Username" autocomplete="off"></a-input>
        </a-form-item>
        <a-form-item label="密码">
          <a-input
            v-model:value="mes.password"
            type="password"
            placeholder="Password"
            autocomplete="off"
          ></a-input>
        </a-form-item>
        <a-form-item>
          <a-checkbox v-model:checked="checked">Remember me</a-checkbox>
        </a-form-item>
        <a-button type="primary" html-type="submit">登录</a-button>
        <span class="changeB">账号相关请联系管理员</span>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

import { account } from "../../api/index";
import { message } from "ant-design-vue";
import { useStore } from "vuex";
const store = useStore();

const mes = reactive({
  username: "admin",
  password: "123456",
});
message.info('账号密码我已经填好了喔XD/admin 123456')

//简单点的登录验证
let checked = ref(true);
function submitList() {
  if (mes.password === "" || mes.username === "") {
    message.warn("账号或密码不能为空");
  } else {
    account
      .login(mes)
      .then((res) => {
        if (res.meta.status === 200) {
          message.success("登录成功");
          store.commit("setToken", {
            token: res.data.token,
            remember: checked.value,
          });
        } else {
          message.warn(res.meta.msg);
          mes.password = "";
        }
      })
      .catch((err) => {
        // message.error(err)
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.acount {
  background-color: #333;
  width: 100vw;
  background-image: url(~@/assets/login.jpg);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .wrap {
    color: #fff;
    border: 2px solid snow;
    box-shadow: 7px 6px 42px #fff;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    height: 400px;
    width: 400px;
    .title {
      margin-top: 20px;
      font-size: 40px;
      text-align: center;
      color: #fff;
      user-select: none;
    }
    .ant-form {
      margin: 10px;
      .changeB {
        margin-left: 30px;
        color: #1890ff;
        cursor: pointer;
      }
    }
  }
}
</style>
